<template>
	<view class="fl-s-s p-30 relative pbox" style="padding-top: 0;">
		<view class="ibox fr-s-c">
			<text class="c-33 fs-30 w-132 bold">+86</text>
			<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/phone.png" mode=""></image> -->
			<input type="number" maxlength="11" v-model="mobile" class="flex-1 m-l-15 fs-28" placeholder="请输入手机号" />
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-30 w-132 bold">验证码</text>
			<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/security.png" mode=""></image> -->
			<input type="number" maxlength="6" v-model="code" class="flex-1 fs-28 m-l-15" placeholder="请输入验证码" />
			<text class="c-main codebtn fr-c fs-20" @click="getCode">{{tips}}</text>
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-30 w-132 bold">密码</text>
			<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/pwd.png" mode=""></image> -->
			<input type="text" :password="pwd" v-model="password" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请输入密码" />
			<up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon>
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-30 w-132 bold">确认密码</text>
			<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/pwd.png" mode=""></image> -->
			<input type="text" :password="pwd" v-model="repwd" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请再次输入新密码" />
			<up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon>
		</view>
		<!-- <view class="ibox fr-s-c">
			<text class="c-33 fs-30 w-132 bold">邀请码</text>
			<input type="text" v-model="scene" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请输入邀请码" />
		</view> -->
		<view class="flex-1"></view>
		<view class="w-1 fr-c bg-ff">
			<view class="c-99 fr-s-c fs-24 p-30" >
				<view class="fr-s-c" @click="agree=!agree">
					<image v-if="agree" style="width: 32rpx; height: 32rpx;" src="/static/images/login/y.png"></image>
					<image v-if="!agree" style="width: 32rpx; height: 32rpx;" src="/static/images/login/n.png"></image>
					<text class="m-l-10">我已阅读并同意</text>
				</view>
				<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=3" hover-class="none">《用户协议》
				</navigator>
				<text class="c-main">和</text>
				<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=2" hover-class="none">《隐私政策》
				</navigator>
			</view>
		</view>
		
		<view class="big-btn c-ff fr-c fs-30" @click="sub">下一步</view>
		
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	const mobile = ref('');
	const code = ref('');
	const password = ref('');
	const scene = ref('');
	const repwd = ref('')
	const pwd = ref(true);
	const agree = ref(false)
	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		// console.log(text)
		tips.value = text;
	};
	const getCode = () => {
		if(!mobile.value) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url:"/api/Sms/send",
				data:{
					mobile:mobile.value,
					event:'register',			// 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res=>{
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	

	
	function sub(){
		if(!mobile.value) return uni.$u.toast('请输入手机号');
		if(!code.value) return uni.$u.toast('请输入验证码');
		if(!password.value) return uni.$u.toast('请输入密码');
		if(!repwd.value) return uni.$u.toast('请确认密码');
		if(password.value != repwd.value) return uni.$u.toast('两次密码不一致');
		if(!agree.value) return uni.$u.toast('请已阅读并同意用户协议和隐私政策');
		uni.$post({
			url:'/api/user/register',
			data:{
				mobile:mobile.value,
				code:code.value,
				password:password.value,
				scene:scene.value,
				group:3
			}
		}).then(res=>{
			nowid.value = 2;
			const user = res.data.userinfo;
			uni.setStorageSync('user', user)
			uni.navigateTo({
				url:'./AuthName'
			})
		})
	}
	
</script>

<style>
	page{
		background: #ffffff;
	}
	.ibox {
		width: 686rpx;
		height: 88rpx;
		/* background: #f8f8f8; */
		/* border-radius: 44rpx 44rpx 44rpx 44rpx; */
		padding: 25rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
		margin-top: 38rpx;
	}

	.kuang {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #013591;
	}
	
	.w-132{
		width: 132rpx;
	}
	
	
	.pbox{
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
	}
	
	.codebtn{
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}
	
	
	.qybox{
		width: 690rpx;
		height: 92rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>